<template>
  <div id="home">
    <!-- 头部的标题栏 -->
   <title-bar>
     <h2 slot="center">首页</h2>
   </title-bar>
   <!-- 搜索栏内容 -->
   <search-bar @searchClick="seaClick"></search-bar>
   <!-- 轮播图部分 -->
   <home-swiper></home-swiper>
   <!-- 宫格展示 -->
   <home-grid></home-grid>
   <!-- 首页商品信息 -->
   <home-info></home-info>
  </div>
</template>

<script>
import SearchBar from '../components/common/search_bar/SearchBar.vue'
import TitleBar from '../components/common/title_bar/TitleBar.vue'
import HomeGrid from '../components/HomeChildrenComponents/HomeGrid.vue'
import HomeInfo from '../components/HomeChildrenComponents/HomeInfo.vue'
import HomeSwiper from '../components/HomeChildrenComponents/HomeSwiper.vue'
export default {
  components: { TitleBar, SearchBar, HomeSwiper, HomeGrid, HomeInfo },
  name:"Home",
  methods:{
    seaClick(r){
      this.$emit("searchClick",r)
    }
  }
}
</script>

<style scoped>
  #home{
    margin-bottom: 50px;
  }
</style>